<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-20 11:50:05
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-05-04 17:50:59
 * @FilePath: \cxl-h5\src\pages\personalCenter\wallet\refund\detailed\Index.vue
-->
<template>
    <section class="refund-container">
        <section class="box">
            <!-- 退款的状态 -->
            <section class="refund-block refund-status">
                <section>
                    <template v-if="data.refundStatus">
                        <img src="../../../../../assets/images/finish.svg" alt="" />
                        <p>退款成功</p>
                        <span>已为您退款成功</span>
                    </template>
                    <template v-else>
                        <img src="../../../../../assets/images/waiting.svg" alt="" />
                        <p>退款中</p>
                        <span>您提交的退款申请已受理，请耐心等候~</span>
                    </template>
                </section>
            </section>
            <!-- 退款内容 -->
            <section class="refund-block refund-content">
                <section class="li" v-for="item in data.refundContent" :key="item.name">
                    <section class="title">{{ item.name }}</section>
                    <section :class="['info', item.price ? 'price' : '']">
                        <template v-if="item.price"> <i>￥</i>{{ item.value }} </template>
                        <template v-else>{{ item.value }}</template>
                    </section>
                </section>
            </section>
        </section>
    </section>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import RefundDetailed from '.'

//初始化数据
const data = reactive(new RefundDetailed())
</script>

<style scoped lang="scss">
.refund-container {
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);

    padding-top: var(--cxl-size-16);
    box-sizing: border-box;
}
.box {
    box-sizing: border-box;
    padding: 0 var(--cxl-size-16);
}
.refund-block {
    background-color: var(--cxl-color-white);
    border-radius: var(--cxl-size-6);
    box-sizing: border-box;
    padding: var(--cxl-size-16);
    margin-bottom: var(--cxl-size-10);
}
.refund-status {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    img {
        display: block;
        width: 5.83rem;
        height: 5.83rem;
        margin: auto;
    }
    p {
        font-size: var(--cxl-size-18);
        font-weight: 600;
        color: var(--cxl-color-333333);
        margin: var(--cxl-size-8) 0;
    }
    span {
        font-size: var(--cxl-size-14);
        color: var(--cxl-color-999999);
    }
}
.refund-content {
    .li {
        display: flex;
        &:not(:last-child) {
            margin-bottom: var(--cxl-size-18);
        }

        > section {
            font-size: var(--cxl-size-14);
            color: var(--cxl-color-333333);
        }
        .title {
            width: 8rem;
        }
        .info {
            width: calc(100% - 8rem);

            &.price {
                color: var(--cxl-color-primary);
                font-size: var(--cxl-size-18);
                i {
                    font-size: var(--cxl-size-12);
                }
            }
        }
    }
    &.refund-count {
        .li {
            .info {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                p {
                    color: var(--cxl-color-primary);
                    margin-right: var(--cxl-size-6);
                }
            }
        }
    }
}
</style>
